<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签页切换测试</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="#" onclick="showTab('dashboard')">
                                <i class="bi bi-speedometer2"></i> 仪表盘
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" onclick="showTab('groups')">
                                <i class="bi bi-people"></i> 群组管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" onclick="showTab('friends')">
                                <i class="bi bi-person"></i> 好友管理
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区域 -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2" id="pageTitle">仪表盘</h1>
                </div>

                <!-- 仪表盘 -->
                <div id="dashboard" class="tab-content" style="display: block;">
                    <h3>仪表盘内容</h3>
                    <p>这是仪表盘页面</p>
                </div>

                <!-- 群组管理 -->
                <div id="groups-content" class="tab-content" style="display: none;">
                    <h3>群组管理</h3>
                    <button class="btn btn-primary" onclick="loadGroups()">加载群组</button>
                    <div class="mt-3">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>群ID</th>
                                    <th>群名称</th>
                                    <th>成员数量</th>
                                </tr>
                            </thead>
                            <tbody id="groupsTableBody">
                                <tr><td colspan="3" class="text-center">点击按钮加载群组</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 好友管理 -->
                <div id="friends-content" class="tab-content" style="display: none;">
                    <h3>好友管理</h3>
                    <button class="btn btn-primary" onclick="loadFriends()">加载好友</button>
                    <div class="mt-3">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>微信ID</th>
                                    <th>昵称</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody id="friendsTableBody">
                                <tr><td colspan="3" class="text-center">点击按钮加载好友</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/axios.min.js') }}"></script>
    
    <script>
        // 标签页切换函数
        function showTab(tabName) {
            console.log('切换到标签页:', tabName);
            
            // 隐藏所有标签页内容
            const allTabContents = document.querySelectorAll('.tab-content');
            allTabContents.forEach(content => {
                content.style.display = 'none';
            });
            
            // 移除所有导航链接的active状态
            const allNavLinks = document.querySelectorAll('.nav-link');
            allNavLinks.forEach(link => {
                link.classList.remove('active');
            });
            
            // ID映射：将简化的tabName映射到实际的HTML ID
            const idMapping = {
                'dashboard': 'dashboard',
                'groups': 'groups-content',
                'friends': 'friends-content'
            };
            
            const actualId = idMapping[tabName] || tabName;
            
            // 显示选中的标签页内容
            const targetContent = document.getElementById(actualId);
            if (targetContent) {
                targetContent.style.display = 'block';
                console.log('显示标签页:', actualId);
            } else {
                console.error('找不到标签页内容:', actualId);
            }
            
            // 设置对应导航链接为active状态
            const targetNavLink = document.querySelector(`[onclick="showTab('${tabName}')"]`);
            if (targetNavLink) {
                targetNavLink.classList.add('active');
            }
            
            // 更新页面标题
            const titleElement = document.getElementById('pageTitle');
            if (titleElement) {
                const titles = {
                    'dashboard': '仪表盘',
                    'groups': '群组管理',
                    'friends': '好友管理'
                };
                titleElement.textContent = titles[tabName] || '仪表盘';
            }
            
            // 根据标签页加载相应数据
            switch(tabName) {
                case 'groups':
                    loadGroups();
                    break;
                case 'friends':
                    loadFriends();
                    break;
            }
        }

        // 加载群组
        async function loadGroups() {
            try {
                const response = await axios.get('/api/groups');
                if (response.data.success) {
                    displayGroups(response.data.data);
                } else {
                    console.error('加载群组失败:', response.data.message);
                }
            } catch (error) {
                console.error('loadGroups 错误:', error);
            }
        }

        function displayGroups(groups) {
            const tbody = document.getElementById('groupsTableBody');
            if (!tbody) return;
            
            if (groups && groups.length > 0) {
                const groupsHtml = groups.map(group => `
                    <tr>
                        <td>${group.qid}</td>
                        <td>${group.group_name}</td>
                        <td>${group.member_count}</td>
                    </tr>
                `).join('');
                tbody.innerHTML = groupsHtml;
            } else {
                tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">暂无群组数据</td></tr>';
            }
        }

        // 加载好友
        async function loadFriends() {
            try {
                const response = await axios.get('/api/friends');
                if (response.data.success) {
                    displayFriends(response.data.data);
                } else {
                    console.error('加载好友失败:', response.data.message);
                }
            } catch (error) {
                console.error('loadFriends 错误:', error);
            }
        }

        function displayFriends(friends) {
            const tbody = document.getElementById('friendsTableBody');
            if (!tbody) return;
            
            if (friends && friends.length > 0) {
                const friendsHtml = friends.map(friend => {
                    const wxid = friend.wxid && friend.wxid.string ? friend.wxid.string : (friend.wxid || '');
                    const nickname = friend.nickname && friend.nickname.string ? friend.nickname.string : (friend.nickname || '');
                    const remark = friend.remark && friend.remark.string ? friend.remark.string : (friend.remark || '--');
                    
                    return `
                        <tr>
                            <td>${wxid}</td>
                            <td>${nickname}</td>
                            <td>${remark}</td>
                        </tr>
                    `;
                }).join('');
                tbody.innerHTML = friendsHtml;
            } else {
                tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">暂无好友数据</td></tr>';
            }
        }
    </script>
</body>
</html> 